<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>图书详情</title>
    <link type="text/css" rel="stylesheet" href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}"/>
</head>

<body>
<!--导航部分  begin-->
<div th:replace="common/header :: header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel :: carousel"></div>
<!--最顶端轮播图片 end-->

<!--外层div-->
<div class="container">
    <!--左边-->
    <div class="col-md-8 col-sm-12">
        <ol class="breadcrumb">
            <li>
                <a href="#">图书详情</a>
            </li>
            <li>
                <a href="#" th:text="${book.name}">愿你的青春不负梦想</a>
            </li>
        </ol>

        <div class="row">
            <div class="col-sm-12 col-md-6">
                <div class="thumbnail">
                    <a><img src="images/yuannideqingchunbufumengxiang.jpg" th:src="@{'/images/' + ${book.imgUrl}}"
                            style="height: 200px;" alt="通用的占位符缩略图"></a>
                    <div class="caption">
                        <h3 th:text="${book.name}">愿你的青春不负梦想</h3>
                        <p>双十一特价,包邮哟!亲<img src="images/3.gif" th:src="@{/images/3.gif}"
                                           style="width: 24px;height: 24px;"></p>
                        <p>
                        <div style="margin-bottom: 5px;width: 100px;">
                            <input type="number" id="bookCount" class="form-control" placeholder="购买数量" min="1"
                                   max="100" value="1" onclick="selectByCount(this)">
                        </div>
                        <div style="clear: both;">
                            <a href="javascript:void(0)" class="btn btn-default" role="button">
                                <span class="glyphicon glyphicon-usd"></span> 立即购买
                            </a>
                            <a href="javascript:void(0)" th:onclick="addCart([[${book.id}]])" class="btn btn-default"
                               role="button">
                                <span class="glyphicon glyphicon-shopping-cart"></span> 加入购物车
                            </a>
                            <!--										TODO 收藏-->
<!--                            <a> [[${BookStatus}]]</a>-->
                            <a href="javascript:;" class="btn btn-default  " role="button"
                               th:onclick="changeColor([[${book.id}]])">
                                <span class="glyphicon glyphicon glyphicon-heart-empty love"></span>
                                <span class="collect">立即收藏</span>
                            </a>
                            <script>
                                <!--BookStatus 用户登陆单击详情-->
                                window.BookStatus = [[${BookStatus}]]
                                let collect = document.querySelector('.collect')
                                let color = document.querySelector('.love')
                                window.onload = function () {

                                    if (BookStatus == 1) {
                                        collect.innerHTML = '已收藏';
                                        color.style.color = 'red'
                                    } else {
                                        color.style.color = '';
                                        collect.innerHTML = '立即收藏'
                                    }
                                }

                                function changeColor(bookId) {
                                    //验证用户是否登录
                                    if (user == '' || user == null) {
                                        alert("请先登录");
                                        return;
                                    }
                                    if (BookStatus != 1) {

                                        $.ajax({
                                            url: "/favorites/add",
                                            data: {"bookId": bookId},
                                            method: "post",
                                            success: function (data) {
                                                if (data == 'success') {
                                                    //跳转到购物车列表
                                                    // window.location.href = "/cart/list";
                                                    alert("收藏成功！")
                                                    // changeColor();
                                                    collect.innerHTML = '已收藏';
                                                    color.style.color = 'red'
                                                    BookStatus = 1
                                                    // alert(BookStatus)
                                                }
                                            }
                                        })
                                    } else {
                                        $.ajax({
                                            url: "/favorites/delete",
                                            data: {"bookId": bookId},
                                            method: "post",
                                            success: function (data) {
                                                if (data == 'success') {
                                                    //跳转到购物车列表
                                                    // window.location.href = "/cart/list";
                                                    alert("取消收藏！")
                                                    // changeColor();
                                                    collect.innerHTML = '立即收藏';
                                                    color.style.color = ''
                                                    BookStatus = 0
                                                    // alert(BookStatus)
                                                }
                                            }
                                        })
                                    }

                                }
                            </script>

                        </div>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-md-6">
                <div class="thumbnail">
                    <ul class="list-group">
                        <li class="list-group-item"><span class="text-success"><span th:text="${book.name}">图书名称:愿你的青春不负梦想</span></span>
                        </li>
                        <li class="list-group-item"><span class="text-info">作者:</span><span
                                th:text="${book.author}">俞敏洪</span></li>
                        <li class="list-group-item"><span class="text-info">出版日期:</span><span
                                th:text="${#dates.format(book.publishDate, 'yyyy年MM月')}">2017年01月</span></li>
                        <li class="list-group-item"><span class="text-info">出版社:</span><span
                                th:text="${book.publisher}">湖南文艺出版社</span></li>
                        <li class="list-group-item"><span class="text-info"
                                                          style="text-decoration: line-through;">原价:</span><span
                                style="text-decoration: line-through;" th:text="${'$'+ book.oldPrice + '元'}">$36元</span>
                        </li>
                        <li class="list-group-item"><span class="text-info">现价:</span><span
                                th:text="${'$'+ book.newPrice + '元'}">$21.6元</span></li>
                        <li class="list-group-item"><span class="text-info">说明:</span><span th:text="${book.info}">50年心路历程×25年创业思考×80场演讲精华，实现你心中的梦想。</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--<hr>-->
        <!--折叠部分 begin-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        展开详细信息
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <!--tab选项卡 begin-->
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#home" data-toggle="tab">
                                商品详情
                            </a>
                        </li>
                        <li>
                            <a href="#ios" data-toggle="tab"> <span class="badge pull-right">50</span>累计评价</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="home">
                            <p>
                                <em>产品参数：</em>
                            </p>
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <ul class="nav navbar-collapse" style="line-height: 3;">
                                        <li class="text-info">产品名称：<span th:text="${book.name}">愿你的青春不负梦想</span></li>
                                        <li class="text-info">是否是套装: <span th:text="${book.suit.getDesc()}">否</span>
                                        </li>
                                        <li class="text-info">书名:<span th:text="${book.name}">愿你的青春不负梦想</span></li>
                                        <li class="text-info">定价: <span th:text="${book.newPrice} + '元'">36.00元</span>
                                        </li>
                                        <li class="text-info">出版社名称: <span th:text="${book.publisher}">湖南文艺出版社</span>
                                        </li>
                                        <li class="text-info">出版时间: <span
                                                th:text="${#dates.format(book.publishDate, 'yyyy年MM月')}">2017年01月</span>
                                        </li>
                                        <li class="text-info">作者: <span th:text="${book.author}">俞敏洪</span></li>
                                        <li class="text-info">作者地区: <span th:text="${book.authorLoc}">中国</span></li>
                                        <li class="text-info">ISBN编号: <span th:text="${book.isbn}">9787540478612</span>
                                        </li>
                                    </ul>
                                </div>
                                <span class="visible-sm visible-xs"><hr></span>

                            </div>
                            </p>
                        </div>
                        <div class="tab-pane fade" id="ios">
                            <p>
                            <ul class="list-group">
                                <li class="list-group-item"><span class="text-info">小明:</span><span
                                        class="text-success ">这真的是一本好书<img src="images/emotions/1.gif"
                                                                           th:src="@{/images/emotions/1.gif}"></span>
                                </li>
                                <li class="list-group-item"><span class="text-info">success:</span><span
                                        class="text-danger ">书的质量很差<img src="images/emotions/2.gif"
                                                                        th:src="@{/images/emotions/2.gif}"></span></li>
                                <li class="list-group-item"><span class="text-info">叶老师:</span><span
                                        class="text-success ">很值得初学者学习<img src="images/emotions/13.gif"
                                                                           th:src="@{/images/emotions/13.gif}"></span>
                                </li>
                                <li class="list-group-item"><span class="text-info">amdin:</span><span
                                        class="text-danger ">被坑大发了.<img src="images/emotions/17.gif"
                                                                        th:src="@{/images/emotions/17.gif}"></span></li>
                                <li class="list-group-item"><span class="text-info">rose:</span><span
                                        class="text-danger ">卖家态度恶劣.<img src="images/emotions/11.gif"
                                                                         th:src="@{/images/emotions/11.gif}"></span>
                                </li>
                            </ul>
                            </p>
                            <p>
                            <ul class="pager">
                                <li>
                                    <a href="# ">&larr;上一页</a>
                                    <a href="# ">下一页 &rarr;</a>
                                </li>
                            </ul>
                            </p>
                        </div>
                    </div>
                    <!--tab选项卡 end-->
                </div>
            </div>
        </div>
        <!--折叠部分end-->
    </div>

    <!--右边-->
    <div class="col-md-4 col-sm-3 col-xs-8">
        <ol class="breadcrumb ">
            <li>
                <a href="# " class="text-success "><span class="glyphicon glyphicon-shopping-cart "></span>我的购物车</a>
            </li>
            <li>
                <a href="# ">3个商品</a>
            </li>
            <li>
                <a href="# ">总价100元</a>
            </li>
        </ol>

        <!--猜您喜欢-->
        <div>
            <span class="text-info"><span class="glyphicon glyphicon-heart"></span><span
                    style="font-size: 20px; ">猜您喜欢</span></span>
            <div class="row" id="love">
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail">
                        <a href="details.html"><img src="images/xiaodaolifencunzhijian.jpg"
                                                    th:src="@{/images/xiaodaolifencunzhijian.jpg}"
                                                    style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>小道理：分寸之间</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a href="details.html"><img src="images/NO SECRETS.jpg" th:src="@{/images/NO SECRETS.jpg}"
                                                    style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>名创优品没有秘密</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a href="details.html"><img src="images/maichanpinjiushimaiziji.jpg"
                                                    th:src="@{/images/maichanpinjiushimaiziji.jpg}"
                                                    style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>卖产品就是卖自己</h3>
                        </div>
                    </div>
                </div>
                <div>
                    <ul class="pager ">
                        <li>
                            <a href="# " onclick="pageUp() ">&larr;上一页</a>
                            <a href="# " onclick="pageDown() ">下一页 &rarr;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!--首页底部信息 begin-->
<div th:replace="common/footer :: footer"></div>
<!--首页底部信息end-->

<!-- 登录/注册模态框 -->
<div th:replace="common/bookModal :: bookModal"></div>

<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
<script src="js/wow.js" th:src="@{/js/wow.js}"></script>
<script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript"></script>
<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
<script src="js/details.js" th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/login_reg.js}"></script> <!--引入登录与注册的js-->

<!--提取session里存储的用户信息-->
<script th:inline="javascript">
    var user = [[${session.user}]];
</script>


<script type="text/javascript">
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
    }
    ;

    //加入购物车
    function addCart(bookId) {
        //验证购买图书数量
        var bookNum = $("#bookCount").val();
        if (bookNum == '' || bookNum == 'undefined') {
            alert("请输入购买数量");
            return;
        }
        //验证用户是否登录
        if (user == '' || user == null) {
            alert("请先登录");
            return;
        }

        //加入购物车
        $.ajax({
            url: "/cart/add",
            data: {"bookNum": bookNum, "bookId": bookId},
            method: "post",
            success: function (data) {
                if (data == 'success') {
                    //跳转到购物车列表
                    window.location.href = "/cart/list";
                }
            }
        })
    }

    function addFavorites(bookId) {
        //验证用户是否登录
        if (user == '' || user == null) {
            alert("请先登录");
            return;
        }
        // changeColor()

        //加收藏
        $.ajax({
            url: "/favorites/add",
            data: {"bookId": bookId},
            method: "post",
            success: function (data) {
                if (data == 'success') {
                    //跳转到购物车列表
                    // window.location.href = "/cart/list";
                    alert("收藏成功！")
                    changeColor();
                }
            }
        })
    }
</script>
</body>
</html>
